/*
* 下拉栏列表
*
* reClass：覆盖样式名称
* */
'use strict';
var React = require('react');
class ReLeftNavigationBar extends React.Component {
    constructor(props) {
        super(props);
        this.renderList=this.renderList.bind(this);
        this.getGroupClass=this.getGroupClass.bind(this);
        this.getMainClass=this.getMainClass.bind(this);
        this.getIco=this.getIco.bind(this);
        this.state={
            active:0
        }
    }

    //动态改变类名
    getGroupClass(activeNum){
        if(activeNum==this.state.active){
            return "ReLeftNavigationContent active";
        }
        else{
            return "ReLeftNavigationContent";
        }
    }

    //动态获取标
    getIco(activeNum){
        if(activeNum==this.state.active){
            return "∧";
        }
        else{
            return "∨";
        }
    }

    setActive(activeNum){
        this.setState({
            active:activeNum
        });
    }

    //获取主样式
    getMainClass(){
        if(this.props.reClass!=undefined){
            return "ReLeftNavigationContainer "+this.props.reClass;
        }
        else{
            return 'ReLeftNavigationContainer';
        }
    }

    renderList(){
        return this.props.children.map((item,i)=>{
          return <li key={"ReLeftNavigationGroup"+i} className="ReLeftNavigationGroup">
                <div className="ReLeftNavigationTitle" onClick={this.setActive.bind(this,i)}><div className="TitleLeft">{item.props.reTitle}</div><div className="TitleRight">{this.getIco(i)}</div></div>
                <div className={this.getGroupClass(i)}>{item}</div>
            </li>
        });
    }

    render(){
        return (
            <ul className={this.getMainClass()}>
                {this.renderList()}
            </ul>
        );
    }
}
ReLeftNavigationBar.propTypes={
    reClass:React.PropTypes.string
};

module.exports=ReLeftNavigationBar;